<!DOCTYPE html>
<html>
<head>
<title>homefixed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="copyright" content="www.apicloud.com" />
<script src="../script/api.js"></script>
<style>
    html,body,header,section,footer,nav,div,ul,ol,li,img,a,span,em,del,center,strong,var,fieldset,form,label,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea{
        margin:0;
        border:0;
        padding:0;
        font-family: Tahoma, Geneva, sans-serif;
        font-style:normal;
    }
html,body {
    -webkit-touch-callout:none;
    -webkit-text-size-adjust:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-user-select:none;
}
header,footer,section,nav,img,a,button,em,del,strong,var,fieldset,label,cite,small,time,mark,code,figcaption,figure,textarea{
    display:block;
}
header,section,footer,nav {
    position:relative;
    overflow:hidden;
}
ol,ul{
    list-style:none;
}
input,button,textarea {
    border:0;
    margin:0;
    padding:0;
    font-size:1em;
    line-height:1em;
    -webkit-appearance:none;
    background-color:rgba(0, 0, 0, 0);
}
span{
    display:inline-block;
}
a,a:visited{
    text-decoration:none;
}
body {
    background-color:#404040;
}
#main {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:-webkit-box;
    -webkit-box-orient: vertical;
}
header {
    height:200px;
    background-color:#333333;
    display:-webkit-box;
    -webkit-box-orient:vertical;
}
header>div {
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:start;
}
#logo {
   -webkit-box-flex:1;
   -webkit-box-align:center;
}
#title {
    height:30px
}
#desp {
    height:40px;
}
#logo>img {
    width:98px;
    height:98px;
}
#title>strong {
    font-size:16px;
    color:#fff;
}
#desp>em {
    font-size:15px;
    color:#484848;
}
section {
    -webkit-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    background-color:#404040;
}
a {
    position:relative;
    -webkit-box-flex:1;
}
.ui {
    color:#9d9d9d;
    background:url(../image/slid/ui_sort.png) no-repeat 40px 24px;
    -webkit-background-size:16px 16px;
}

.navmenu {
    color:#9d9d9d;
    background:url(../image/slid/navmenu_sort.png) no-repeat 40px 24px;
    -webkit-background-size:16px 16px;
}
.function {
    color:#9d9d9d;
    background:url(../image/slid/function_sort.png) no-repeat 40px 24px;
    -webkit-background-size:16px 16px;
}
.device {
    color:#9d9d9d;
    background:url(../image/slid/device_sort.png) no-repeat 40px 24px;
    -webkit-background-size:16px 16px;
}
.api {
    color:#9d9d9d;
    background:url(../image/slid/api_sort.png) no-repeat 40px 24px;
    -webkit-background-size:16px 16px;
}
.other {
    color:#9d9d9d;
    background:url(../image/slid/other_sort.png) no-repeat 40px 24px!important;
    -webkit-background-size:16px 16px!important;
}

    .ui-hov {
        color:#fff;
        background:url(../image/slid/ui_sort_click.png) no-repeat 40px 24px;
        -webkit-background-size:16px 16px;
    }

    .navmenu-hov {
        color:#fff;
        background:url(../image/slid/navmenu_sort_click.png) no-repeat 40px 24px;
        -webkit-background-size:16px 16px;
    }
    .function-hov {
        color:#fff;
        background:url(../image/slid/function_sort_click.png) no-repeat 40px 24px;
        -webkit-background-size:16px 16px;
    }
    .device-hov {
        color:#fff;
        background:url(../image/slid/device_sort_click.png) no-repeat 40px 24px;
        -webkit-background-size:16px 16px;
    }
    .api-hov {
        color:#fff;
        background:url(../image/slid/api_sort_click.png) no-repeat 40px 24px;
        -webkit-background-size:16px 16px;
    }
    .other-hov {
        color:#fff;
        background:url(../image/slid/other_sort_click.png) no-repeat 40px 24px!important;
        -webkit-background-size:16px 16px!important;
    }

a>span {
    margin-top:24px;
    margin-left:78px;
    line-height:16px;
    font-size:16px;
    line-height:16px;
}
a>em {
    position:absolute;
    top:23px;
    right:47px;
    width:18px;
    height:18px;
    background-color:#333333;
    -webkit-border-radius:3px;
    color:#3c7390;
    font-size:10px;
    line-height:18px;
    text-align:center;
}
footer {
    border-top: 1px solid #404040;
    height: 40px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    background-color: rgb(64,64,64);
}
footer>div {
    width:128px;
    height:30px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    background:url(../image/about_us.png) no-repeat center;
    -webkit-background-size:128px 30px;
}
footer>div>em {
    color: #3c7390;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
}
.aboutHov{
    background:url(../image/about_us_hov.png) no-repeat center!important;
    -webkit-background-size:128px 30px!important;
    color: #6a99b8!important;
}
</style>
</head>
<body>
    <div id="main">
        <header id="header">
            <div id="logo">
                <img src="../image/logo.png" />
            </div>
            <div id="title">
                <strong>apicloud.com</strong>
            </div>
            <div id="desp">
                <em>Cloud Client Consistent</em>
            </div>
        </header>
        <section>
            <a class="ui" tapmode="ui-hov" onclick="openWin(0)">
                <span>界面</span>
                <em id="sortCount0"></em>
            </a>
            <a class="navmenu" tapmode="navmenu-hov" onclick="openWin(1)">
                <span>导航菜单</span>
                <em id="sortCount1"></em>
            </a>
            <a class="function" tapmode="function-hov" onclick="openWin(2)">
                <span>功能</span>
                <em id="sortCount2"></em>
            </a>
            <a class="device" tapmode="device-hov" onclick="openWin(3)">
                <span>设备</span>
                <em id="sortCount3"></em>
            </a>
            <a class="api" tapmode="api-hov" onclick="openWin(4)">
                <span>API对象</span>
                <em id="sortCount4"></em>
            </a>
            <a class="other" tapmode="other-hov" onclick="openWin(5)">
                <span>开放SDK</span>
                <em id="sortCount5"></em>
            </a>
        </section>

        <footer>
        <div tapmode="aboutHov" onclick="api.openWin({name:'about',url:'about.html',opaque:true,bgColor:'#FFF'});">
            <em>关于我们</em>
        </div>
    </footer>
    </div>
</body>
<script src="../script/dataSource.js"></script>
<script>

    /* 根据模块类型打开不同的窗口. */
    function openWin(sortId){

        var delay = 0;

        if("ios" != api.systemType){
            delay = 300;
        }

        api.openWin({
                    name: "sort",
                    url: "./sort.html",
                    pageParam: {
                        sortId: sortId
                    },
                    bounces: false,
                    vScrollBarEnabled:false,
                    hScrollBarEnabled:false,
                    reload: true,
                    delay: delay
                }
        );
    }

    // ----------------------------------------------------------

    window.apiready = function(){
        api.addEventListener({name: 'keyback'}, function(ret, err){
            api.closeWidget();
        });

        var main = $api.byId('main');
        main.style.width = (api.frameWidth - 48)+'px';
        var header = $api.byId('header');
        $api.fixIos7Bar(header);

        for(var i = 0; i <= 5; i++){
            document.getElementById("sortCount" + i).innerHTML = countSort(i);
        }
    };

    /* 动态计算某分类下模块的数量. */
    function countSort(sortId){
        /* 根据模块列别 id 取得此类别下的所有的模块的详细信息,并升序排列 */
        var  count = 0;

        for(var idx in window["dataSource"]["modules"]){
            var module = window["dataSource"]["modules"][idx];
            if(sortId == module["sortId"]){
                count ++;
            }
        }

        return count;
    }

</script>
</html>